<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%--
  Created by IntelliJ IDEA.
  User: E550
  Date: 2017/8/27
  Time: 22:23
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <c:import url="/WEB-INF/jsp/frontend/head.jsp" />
    <c:import url="/WEB-INF/jsp/frontend/script.jsp" />
    <c:import url="/WEB-INF/jsp/frontend/post/head.jsp" />
    <title>帖子详情</title>
</head>
<body>
<div class="head">
    <c:import url="/WEB-INF/jsp/frontend/header.jsp" />
</div>
<div class="row post-body">
    <div class="col-md-2"></div>
    <div class="col-md-8 post-container">
        <div class="row post-path-container">
            <div class="col-md-12 post-path-content">
                <a href="<spring:url value="/postList"/>">主题交流区</a> >> <a href="#">课程讨论区</a> >> <a href="#">课程标题1</a>
            </div>
        </div>
        <div class="row post-caption-container">
            <div class="caption-text">${post.post.postName}</div>
            <div class="to-reply" id="reply-bottom">回复</div>
            <div class="only-landlord">只看楼主</div>
        </div>
        <div class="post-content">
            <div class="row landlord">
                <div class="col-md-2 user">
                    <div class="user-info">
                        <img style="cursor: pointer" src="../../../../images/activity_person.png" class="img-circle" id="head-img" onclick="window.location.href='<spring:url value='/personalCenter/index/${post.post.postPub}' />'">
                        <div class="user-name text-center">${post.post.postPubName}</div>
                    </div>
                </div>

                <div class="col-md-10 posts">
                    <div class="posts-text">${post.postContent.postText}</div>
                    <div class="functions">
                        <div class="replies"><span class="reply-color">回复</span>{{666}}</div>
                        <div class="replyTime"><fmt:formatDate value="${post.post.postCreateTime}"  type="both"/></div>
                        <div class="floorIndex">1楼</div>
                    </div>
                </div>
            </div>

            <div id="reply_block">
                <jsp:include page="/WEB-INF/jsp/frontend/post/postReplyList.jsp" flush="true"/>
            </div>

            <div class="row">
                <div class="col-md-12 reply-pages">这里是页码</div>
            </div>
            <div class="row create-reply-container">
                <div class="col-md-10 create-reply-content">
                    <div class="create-reply">
                        <div class="create-reply-title">发表回复</div>
                        <form id="replyForm" action method="post">
                            <div contenteditable="true" class="create-reply-edit my-reply-content" id="reply-input" name="reply_content"></div>
                            <button type="button" class="create-reply-btn" id="submit-reply-btn">发 表</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>




</body>
<script type="text/javascript">
    $(document).ready(function () {
        var oReply = $("#reply-bottom");
        var timer = null;
        var isBottom = true;

        window.onscroll = function () {
            if (!isBottom) {
                clearInterval(timer);
            }
            isBottom = false;
        };

        oReply.click(function () {
            timer = setInterval(function () {
                var osTop = document.documentElement.scrollTop || document.body.scrollTop;
                var oBottom = document.body.scrollHeight - osTop;
                var iSpeed = oBottom / 5;
                document.documentElement.scrollTop = document.body.scrollTop = osTop + iSpeed;
                isBottom = true;
                console.log(osTop - iSpeed);
                if (oBottom - osTop == 0) {
                    clearInterval(timer);
                }
            }, 30);
        });
    });

    var replyHeight = 0;
    // var replyContainerHeight = document.getElementsByClassName('reply-container')[0].style.height;
    function addH() {

        if(replyHeight < 480){
            replyHeight += 40;
            document.getElementById('reply').style.height = replyHeight + 'px';
        }else{
            var btn = document.getElementById('replies-btn');
            btn.href = 'javascript:subH();';
            btn.innerText = '收起回复';
            btn.style.borderColor = "#004896";
            return;
        }
        setTimeout(addH(),30);

    }
    function subH() {

        if(replyHeight > 0){
            replyHeight -= 40;
            document.getElementById('reply').style.height = replyHeight + 'px';
        }else{
            var btn = document.getElementById('replies-btn');
            btn.href = 'javascript:addH();';
            btn.innerText = '回复{{16}}';
            btn.style.borderColor = "#ffffff";
            return;
        }
        setTimeout(subH(),30);

    }

    function open_reply(obj) {
        jQuery(obj).hide();
        jQuery(obj).next().show();
        jQuery(obj).parent().parent().next().animate({height:"toggle"},300);

    }

    function close_reply(obj) {
        jQuery(obj).parent().parent().next().animate({height:"toggle"},300,function () {
            $(obj).hide();
            $(obj).prev().show();
        });
    }




    function replyCheck(thisBlock) {
        if(thisBlock.html() == "</br>" ||  thisBlock.html() == null || thisBlock.html() == "") {
            alert("发帖内容不能为空！");
            thisBlock.focus();
            return false;
        }
    }


    var activityReplyUrl = "<spring:url value="/postReply" />";
    var replyForm = $("#replyForm");
    var replyBtn = $("#submit-reply-btn");

    replyBtn.click(function () {
        var temp = $("#reply-input");
        replyCheck(temp);
        $.ajax({
            type: "POST",
            cache: false,
            async: false,
            url: activityReplyUrl,
            data: {"reply_content": temp.html(), "pid":'${post.post.postId}'},
            dataType: "html",
            success: function (data) {
                alert("成功");
                $("#reply_block").html(data);
                temp.html("");
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert("回复失败");
                alert(XMLHttpRequest.status);
                alert(XMLHttpRequest.readyState);
                alert(textStatus);
            }
        });
        return false;
    });


    function showInfloor(floorId, idx, obj) {
        var Url = "<spring:url value="/postInfloor" />";
        $.ajax({
            type: "POST",
            cache: false,
            async: false,
            url: Url,
            data: {"floorId":floorId},
            dataType: "html",
            success: function (data) {
                $("#reply_infloor_list" + idx).html(data);
                open_reply(obj);
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert("查找失败");
                alert(XMLHttpRequest.status);
                alert(XMLHttpRequest.readyState);
                alert(textStatus);
            }
        });
    }


    function infloorSend(infloor, idx) {
        var infloorUrl = "<spring:url value="/postInfloorReply" />";
        var temp = $("#infloor-reply"+idx);
        replyCheck(temp);
        $.ajax({
            type: "POST",
            cache: false,
            async: false,
            url: infloorUrl,
            data: {"infloor_reply_content": temp.html(), "infloor":infloor},
            dataType: "html",
            success: function (data) {
                alert("成功");
                $("#reply_infloor_list" + idx).html(data);
                temp.html("");
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert("回复失败");
                alert(XMLHttpRequest.status);
                alert(XMLHttpRequest.readyState);
                alert(textStatus);
            }
        });
        return false;
    }

</script>
</html>
